<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">收货人</text>
			<input class="input" type="text" v-model="addressData.receiverName" placeholder="请输入姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">联系电话</text>
			<input class="input" type="number" v-model="addressData.receiverPhone" placeholder="请输入手机号"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地区</text>
			
			<input class="input" type="number" v-model="str" placeholder="请选择地址" @tap="open"
				placeholder-class="placeholder" />
			<!-- <button @tap="open">请选择地址</button> -->
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="confirm" @cancel="cancel" :visible="visible" />
					<view>{{str}}</view>
		</view>
		<view class="row default-row">
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="addressData.detailAddress" placeholder="楼层门牌号等"
				placeholder-class="placeholder" />
		</view>
		<button class="add-btn" @click="add()">新建地址</button>
	
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		data() {
			return {
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '420111',
				column: 3,
				addressData: {
				customerId:'',//用户id  0
				receiverName:'',//收件人姓名  1
				receiverPhone:'',//收件人联系电话  2
				provinceCode:'',//省编码  3
				provinceName:'',	//省名称  4
				cityCode:'',//市编码   5
				cityName:'',//市名称  6
				countyCode:'',//区编码   7
				countyName:'',//区名称   8
				detailAddress:'',	//详细地址  9
				isDefault:'',	//是否默认地址（“1”是“2”否）  10
				}
			}
		},
		onLoad(option) {
			let title = '';
			if (option.type === 'edit') {
				title = '编辑收货地址'

				this.addressData = JSON.parse(option.data)
			}
			this.manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		components: {
			cityPicker
		},
		methods: {
			add() {
			const  header = {
			  'Authorization': uni.getStorageSync('token')
			};
			    uni.request({
			        url: 'https://apis.ouyuetech.com/mall/h5/business/deliveryAddress/addDeliveryAddress',
			        method: 'POST',
			        data: {
			          customerId:'',//用户id
			          receiverName:'',//收件人姓名
			          receiverPhone:'',//收件人联系电话
			          provinceCode:'',//省编码
			          provinceName:'',	//省名称
			          cityCode:'',//市编码
			          cityName:'',//市名称
			          countyCode:'',//区编码
			          countyName:'',//区名称
			          detailAddress:'',	//详细地址
			          isDefault:'2',	//是否默认地址（“1”是“2”否）							
			        },
					header: {
					  'Authorization': 'Bearer ' + uni.getStorageSync('token'),  // token是你的认证令牌
					  'content-type': 'application/json'   // 设置请求的内容类型
					},
			        success: (res) => {
						
						console.log("123")
						console.log(res+'123')
						// addressList:
			        },
					complete: () => {
						console.log("成功了")
					}
			    });
			},


			switchChange(e) {
				this.addressData.default = e.detail;
			},

		addAddress(type, item){
			uni.navigateTo({
				url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
			})
		},

			//提交
			confirm() {
				let data = this.addressData;
				if (!data.name) {
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!data.address) {
					this.$api.msg('请在地图选择所在位置');
					return;
				}
				if (!data.area) {
					this.$api.msg('请填写门牌号信息');
					return;
				}

				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				this.$api.prePage().refreshList(data, this.manageType);
				this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
				setTimeout(() => {
					uni.navigateBack()
				}, 800)
			},
			open() {
				this.visible = true
			
			},
			confirm(val) {
				console.log(val)
				this.str=val.name
				this.addressData.provinceName=val.provinceName
				this.addressData.cityName=val.cityName
				this.addressData.countyName=val.countyName
				this.visible = false
			},
			cancel() {
				this.visible = false
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'data-cityPicker省市区地址选择器！',
				path: '/pages/cityPicker/cityPicker'
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'data-cityPicker省市区地址选择器！'
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.placeholder {
		text-align: right;
	}
</style>